<template>
	<view>
		<view class="lottery_container">
			<image src="../../static/cj/bg@3x.png" class="beijing"></image>
			<image src="../../static/cj/XYDCJ@3x.png" class="xingyun"></image>
			<view class="guangbo">
				<text>恭喜XXXX用户获得华为mate30</text>
			</view>
			<view class="choujiang">
				<image src="../../static/cj/CJ@3x.png" class="choujiangbj"></image>
				<view class="grid_wrap">
					<view class="lottery_wrap">
						<view class="lotterylis" v-for="(item, index) in grid_info" :class="{ active: current_index == index && index != 8 }"
						 :key="index" @click="luck_draw" :data-index="index">
							<image class="grid_img" :src="item.logo" alt=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="lottery-cli">
				<view @click="share()"><text>马上分享</text></view>
				<view><text>购买抽奖次数</text></view>
			</view>
		</view>

	</view>
</template>
<script>
	import LotteryDraw from '@/common/lottery.js';
	import nativeShare from '@/common/NativeShare.js';
	export default {
		data() {
			return {

				lottery_draw_param: {
					startIndex: 0, //开始抽奖位置，从0开始
					totalCount: 4, //一共要转的圈数
					winingIndex: 4, //中奖的位置，从0开始
					speed: 50 //抽奖动画的速度 [数字越大越慢,默认100]
				},
				current_index: -1,
				grid_info: [{
						logo: "../../static/cj/HWmate30@3x.png"
					},
					{
						logo: "../../static/cj/HJ@3x.png"
					},
					{
						logo: "../../static/cj/SJXJHB@3x.png"
					},
					{
						logo: "../../static/cj/iphone11@3x.png"
					},
					{
						logo: "../../static/cj/DDYS@3x.png"
					},
					{
						logo: "../../static/cj/LYEJ@3x.png"
					},
					{
						logo: "../../static/cj/XJHB888@3x.png"
					},
					{
						logo: "../../static/cj/XXHG@3x.png"
					},
					{
						logo: "../../static/cj/LJCJ@3x.png"
					}
				],
				status: 0
			}

		},
		onLoad() {
			// 修改获奖位置（可以在这里获取后台的数据
			this.lottery_draw_param.winingIndex = 7;
		},
		methods: {

			// 抽奖完成
			luck_draw_finish(param) {

				console.log(param)
				// console.log(`抽到第${param+1}个方格的奖品`)
			},
			luck_draw(event) {
				let index = event.currentTarget.dataset.index;
				let that = this;

				if (index == 8 && status == 0) {

					that.status = 1;

					// 点击抽奖之后知道获奖位置，修改父组件中lottery_draw_param的值
					let win = new LotteryDraw({
							domData: that.grid_info,
							...that.lottery_draw_param
						},
						function(index, count) {
							that.current_index = index;
							if (that.lottery_draw_param.winingIndex == index && that.lottery_draw_param.totalCount == count) {
								that.luck_draw_finish(that.grid_info[index])
							}

						}
					)
				}
			},
			share(command) {
				var nativeShare = new NativeShare()
				var shareData = {
					title: '測試幫點點',
					desc: '來點我呀',
					// 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
					//link: 'https://github.com/fa-ge/NativeShare',
					link: 'https://www.baidu.com/',
					icon: 'https://pic3.zhimg.com/v2-080267af84aa0e97c66d5f12e311c3d6_xl.jpg',
					// 不要过于依赖以下两个回调，很多浏览器是不支持的
					success: function() {
						alert('success')
					},
					fail: function() {
						alert('fail')
					}
				}
				nativeShare.setShareData(shareData)
				try {
					nativeShare.call(command)
				} catch (err) {
					// 如果不支持，你可以在这里做降级处理
					alert(err.message)
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #131313;
	}

	.lottery_container {
		display: flex;
		flex-direction: column;
		position: relative;

		.beijing {
			width: 750rpx;
			height: 1334rpx;
		}

		.xingyun {
			position: absolute;
			top: 50rpx;
			left: 150rpx;
			width: 450rpx;
			height: 75rpx;
		}

		.guangbo {
			position: absolute;
			top: 140rpx;
			left: 30rpx;
			width: 690rpx;
			height: 50rpx;
			background: #452091;
			border-radius: 24rpx;
			font-size: 24rpx;
			color: #FBE7AD;
			text-align: center;
			line-height: 50rpx;
		}

		.choujiang {
			position: absolute;
			top: 270rpx;
			left: 30rpx;
			width: 690rpx;
			height: 720rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.choujiangbj {
				position: absolute;
				top: 0;
				left: 0;
				width: 690rpx;
				height: 720rpx;
			}

			.grid_wrap {
				position: relative;

				.lottery_wrap {
					width: 550rpx;
					height: 520rpx;
					position: absolute;
					transform: translate(-50%, -50%);
					z-index: 1;
					display: flex;
					justify-content: row;
					flex-wrap: wrap;

					.lotterylis {
						width: 165rpx;
						height: 165rpx;
						position: absolute;
						display: flex;
						justify-content: center;
						align-items: center;

						.grid_img {
							width: 165rpx;
							height: 165rpx;
						}
					}

					.active {
						background: #ff3a59;

						.grid_img {
							width: 155rpx;
							height: 155rpx;
						}
					}

					.lotterylis:nth-of-type(1) {
						left: 8rpx;
						top: 7rpx;
					}

					.lotterylis:nth-of-type(2) {
						left: 181rpx;
						top: 7rpx;
					}

					.lotterylis:nth-of-type(3) {
						left: 354rpx;
						top: 7rpx;
					}

					.lotterylis:nth-of-type(4) {
						left: 354rpx;
						top: 179rpx;
					}

					.lotterylis:nth-of-type(5) {
						left: 354rpx;
						top: 351rpx;
					}

					.lotterylis:nth-of-type(6) {
						left: 181rpx;
						top: 351rpx;
					}

					.lotterylis:nth-of-type(7) {
						left: 8rpx;
						top: 351rpx;
					}

					.lotterylis:nth-of-type(8) {
						left: 8rpx;
						top: 179rpx;
					}

					// 开始抽奖按钮
					.lotterylis:nth-of-type(9) {
						left: 181rpx;
						top: 179rpx;
						cursor: pointer;
					}
				}
			}
		}

		.lottery-cli {
			position: absolute;
			top: 1060rpx;
			left: 30rpx;
			width: 690rpx;
			height: 70rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			view {
				width: 280rpx;
				height: 70rpx;
				background: url('../../static/cj/btn-bg@3x.png') no-repeat;
				background-size: 100% 100%;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 70rpx;
			}
		}
	}
</style>
